<template>
    <el-dialog v-model="diglogVisible" :title="info.name" width="70%" align-center :show-close="false" :close-on-click-modal="false" >
        <div class="content" v-loading="loading">
            <div class="img-text">
                <img class="img" :src="baseUrl + info.image" align="left" v-if="info.image">
                <span class="title">图鉴编号:</span>
                <span class="id" style="marginLeft:50px;">{{ info.id }}</span>
                <br>
                <span class="title">名称:</span>
                <span class="id" style="marginLeft:80px;">{{ info.name }}</span>
                <br>
                <span class="title">所属地区:</span>
                <span class="id" style="marginLeft:45px;">{{ info.area }}</span>
                <br>
                <span class="title">属性:</span>
                <div class="attributes" style="marginLeft:80px;" v-if="info.attribute">
                    <div class="attr" :class="getAttrClass(attr)" v-for="attr in JSON.parse(info.attribute)" :key="attr">
                        {{ attr }}
                    </div>
                </div>
                <br>
                <span class="title">概述:</span>
                <span class="content">{{ info.outline }}</span>
            </div>
            <!-- 进化图 -->
            <div class="evolution">
                <div class="title">进化图</div>
                <div class="evo-box">
                    <template v-for="(item,index) in EvoList" :key="item.id">
                        <div class="evo-item">
                            <img class="image" :src="baseUrl + item.image">
                            <div class="name">{{ item.name }}</div>
                        </div>
                        <div class="arrow" v-if="index!==EvoList.length-1"></div>
                    </template>

                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('onback')">退出</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { getAttrClass } from '@/utils/attribute'
import { getPokemon } from '@/api/pokemon'
import { ElMessage } from 'element-plus'
import { watch, ref } from 'vue';

type Evo = {
    name: string;
    image:string;
};

const baseUrl = window.config.baseUrl;
const loading = ref(false)
const diglogVisible = ref(false);
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    info: {
        type: Object,
        default: {
            id: 1,
            name: '杰尼龟',
        }
    }
})
const emit = defineEmits(['onback']);

// 进化图宝可梦信息
const EvoList = ref([] as Evo[])
// 获取进化相关宝可梦的信息
const getEvoPokemon = () => {
    const ids = props.info.evolution;
    loading.value = true;
    getPokemon({ ids }).then((res: any) => {
        if (res.code !== 200) return ElMessage.error('获取进化相关宝可梦信息失败')
        EvoList.value = res.data
    }).finally(()=>{
        loading.value = false;
    })
}

watch(() => props.info, (newVal, oldVal) => {
    if (newVal.evolution) {
        getEvoPokemon();
    }
}, { deep: true })

watch(() => props.visible, (newVal, oldVal) => {
    diglogVisible.value = newVal;
    if(!newVal){
        EvoList.value = []
    }
})
</script>

<style scoped lang="scss">
.content {
    height: 700px;
    overflow: auto;
    padding: 0 80px 30px;
}

.img-text {
    white-space: normal;
    text-align: justify;
    word-break: break-all;
    word-wrap: break-word;
    min-height: 400px;

    .title {
        font-size: 22px;
        font-weight: bold;
        margin-right: 20px;
        line-height: 45px;
    }

    .id {
        font-size: 26px;
        font-weight: bold;
    }

    .attributes {
        display: inline-block;

        .attr {
            display: inline-block;
        }
    }

    .img {
        width: 300px;
        height: 300px;
        padding: 50px 100px 40px 50px;
    }

    .content {
        text-indent: 2em;
        line-height: 1.8em;
        font-size: 20px;
    }
}

.evolution {
    margin-top: 30px;
    .title {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .evo-box {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .evo-item {
            .image {
                width: 200px;
                height: 200px;
            }

            .name {
                font-size: 26px;
                text-align: center;
            }
        }
        .arrow{
            width: 100px;
            height: 100px;
            background: url('../../assets/images/jiantou.png');
            background-size: 100% 100%;
        }
    }
}</style>